<template>
	<view class="container">
		<!--订单状态-->
		<view class="stateClass">
			<image src="../../../../static/icon/icon_wait_time.png" class="stateIcon"></image>
			<view class="stateText">等待服务</view>
		</view>

		<!--达人信息-->
		<view class="itemCenter">


			<view style="width: 75%;">
				<view class="itemOneText">{{detailBean.personInfo.name}}</view>
				<view class="itemTwoText">{{detailBean.personInfo.content}}</text></view>
				<view class="itemThreeText">
					<image src="../../../../static/icon/icon_addr_small.png" class="icon_small" /><text
						class="bottomText">{{detailBean.personInfo.area}}</text>
					<image src="../../../../static/icon/icon_time_small.png" class="icon_small bottomText" /><text
						class="bottomText">{{detailBean.personInfo.time}}</text>
				</view>
			</view>
			<image class="rightImg" src="../../../../static/icon/img_girl.png"></image>
			<image class="rightBackImg" src="../../../../static/icon/icon_back.png"></image>
		</view>
		<!--地址信息-->
		<view class="itemCenter" style="margin-top: 60rpx;">
			<view>

				<view class="itemCenter">
					<view class="itemThreeText">
						<image src="../../../../static/icon/icon_addr.png" class="icon_big" />
						<text class="addrText bottomText">777 15157747792</text>
					</view>
				</view>
				<view class="itemCenter" style="margin-top: 20rpx;">
					<view class="itemThreeText">
						<image src="" class="icon_big" />
						<text class="addrBottomText bottomText">嘉兴市南湖区城南街道现代广场</text>
					</view>
				</view>
			</view>
			<image class="rightBackAddrImg" src="../../../../static/icon/icon_back.png"></image>
		</view>


		<!--服务内容-->
		<view class="itemCenter fwnrList" :style="index==0?'margin-top:80rpx':''" v-for="(item, index) in fwnrList">
			<text class="margLeft">{{item.left}}</text>
			<text class="fwnrRight" :class="item.class">{{item.right}}</text>
		</view>
		<!--订单信息-->
		<view class="itemCenter fwnrList" :style="index==0?'margin-top:80rpx':''" v-for="(item, index) in orderList">
			<text class="margLeft">{{item.left}}</text>
			<text class="fwnrRight" :class="item.class">{{item.right}}</text>
		</view>
		<view class="bottomClass">
			<view class="bottonItemClass">修改地址</view>
			<view class="bottonItemClass">申请退款</view>
			<view class="bottonItemClass" style="border-radius: 4px;
		border: 1px solid #FF9E44;color: #FF9E44;">立即服务</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailBean: {
					personInfo: {
						name: '小雨',
						content: '提供线下一对一锻炼陪伴服务',
						area: '嘉兴市全区',
						time: '12:00-22:00'
					}
				},
				fwnrList: [{
						left: '服务内容',
						right: '锻炼达子'
					},
					{
						left: '服务时长',
						right: '2小时'
					},
					{
						left: '服务开始时间',
						right: '2024-07-13 13:00'
					},
					{
						left: '服务结束时间',
						right: '2024-07-13 13:00'
					},
					{
						left: '服务服务结果',
						right: '已完成',
						class: 'stateFwnrClass'
					}
				],
				orderList: [{
						left: '订单备注',
						right: '无'
					},
					{
						left: '服务金额',
						right: '¥160',
						class: 'moneyTextClass'
					},
					{
						left: '优惠券',
						right: '未使用'
					},
					{
						left: '积分抵扣',
						right: '未使用'
					},
					{
						left: '余额抵扣',
						right: '无'
					},
					{
						left: '支付结果',
						right: '已支付',
						class: 'stateFwnrClass'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		background-color: #FFFDFC;
		min-height: 105vh;
	}

	.stateClass {
		text-align: center;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		padding-top: 30rpx;

	}

	.stateIcon {
		width: 20px;
		height: 20px;
		padding-right: 15rpx;
	}

	.stateText {
		color: #FF9E44;
		/* Pingfang SC/H2/Medium */
		font-family: "PingFang SC";
		font-size: 18px;
		font-weight: 500;
		padding-left: 15rpx;
	}

	.itemCenter {
		display: flex;
		align-items: center;
		/* margin-top: 30rpx; */
	}

	.itemOneText {
		margin-left: 20px;
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-weight: 700;
		line-height: 33px;
	}

	.itemTwoText {
		margin-left: 20px;
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		line-height: 33px;
	}

	.itemThreeText {
		margin-left: 20px;
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		line-height: 33px;
		text-align: center;
		display: flex;
		/* 水平居中 */
		align-items: center;
	}

	.icon_small {
		width: 8.571px;
		height: 10.55px;
	}

	.bottomText {
		margin-left: 20rpx;
	}

	.rightImg {
		width: 130rpx;
		height: 140rpx;
		margin-left: -50rpx;
	}

	.rightBackImg {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
	}

	.icon_big {
		width: 20px;
		height: 20px;
	}

	.addrText {
		color: #040B29;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.addrBottomText {
		color: #929397;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.rightBackAddrImg {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
	}

	.margLeft {
		margin-left: 20px;
		color: #929397;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.fwnrRight {
		position: absolute;
		right: 20rpx;
		color: #040B29;
		text-align: right;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 16px;
		/* 133.333% */
	}

	.fwnrList {
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}

	.stateFwnrClass {
		position: absolute;
		right: 20rpx;
		color: #FF9E44;
		text-align: right;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		/* 133.333% */
	}

	.moneyTextClass {
		position: absolute;
		right: 20rpx;
		color: #040B29;
		text-align: right;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 700;
		line-height: 16px;
	}

	.bottomClass {
		flex-wrap: wrap;
		column-count: 3;
		text-align: center;
		padding: 20rpx;
		position: absolute;
		right: 0rpx;
		background: white;
	}

	.bottonItemClass {
		text-align: center;
		color: #040B29;
		font-family: "PingFang SC";
		font-size: 14px;
		font-weight: 400;
		padding: 10rpx;
	}
</style>